<template>
  <div class="main">
    <div class="head-part">
      <van-icon name="close" class="closebtn" @click="reBack" size="28" color="#fff" />
      <img src="@/assets/img/bg.png" />
    </div>
    <div class="content-part">
      <van-button plain type="info" @click="jumpRouter('/checkRecord')"
        style="position: absolute;right: 10px;top: 10px;" size="small">打卡记录</van-button>
      <van-button plain type="info" @click="jumpRouter('/businessList')"
        style="position: absolute;right: 10px;top: 50px;" size="small">商机列表</van-button>
      <div class="title">
        {{ name }}
      </div>
      <div style="color: #7f7f7f; font-size: 2.2rem; margin: 2rem 0 0 2rem">
        <span class="label-l">电信</span>
        <span style="margin: 0 6px;">未摸排</span>
        <span>未建档</span>
      </div>
      <div style="color: #7f7f7f; font-size: 2.2rem; margin: 2rem 0 0 2rem">
        <span style="margin-right: 10px;">模板时间</span>
        <span>暂无数据</span>
      </div>
      <div style="color: #333; font-size: 2.2rem; margin: 2rem 0 0 2rem">
        <span>地址：</span>
        <span>{{ address }}</span>
      </div>

      <div class="card-img">
        <div v-for="(item, index) in images" @click="itemClick(item)" :key="index" class="img-item">
          <img :src="item.img" />
          <span>{{ item.name }}</span>
        </div>
      </div>
      <div class="detail-msg">
        <span style="background: #F2FFFF;padding:6px 10px;font-size: 2.8rem;color: #2F8ADA;font-weight: bold;">
          商铺信息
        </span>
        <div class="item-msg" v-for="(item, idnex) in detailList">
          <span>{{ item.name }}</span>
          <span>{{ item.value }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Sticky,
  Image as VanImage,
  Lazyload,
  Col,
  Row,
  Button,
  Divider,
  List,
  Circle,
} from "vant";
Vue.use(Lazyload);
Vue.use(Sticky);
Vue.use(Col);
Vue.use(Row);
Vue.use(VanImage);
Vue.use(Button);
Vue.use(Divider);
Vue.use(Circle);

export default {
  data() {
    return {
      value: "",
      name: "雨城面馆家常小炒(松江北路店)",
      address: "松江区松北大道",
      images: [
        { name: "打卡", img: require("@/assets/img/qd.png") },
        { name: "信息摸排", img: require("@/assets/img/xxcj.png") },
        { name: "商机上报", img: require("@/assets/img/sjsb.png") },
        { name: "营销拓展", img: require("@/assets/img/tjcp.png") },
        { name: "业务办理", img: require("@/assets/img/ywbl.png") },
      ],
      detailList: [
        { name: "地市", value: "哈尔滨" },
        { name: "县区", value: "松北区" },
        { name: "网格", value: "松浦网格" },
        { name: "街道", value: "--" },
        { name: "商铺名称", value: "雨城面馆家常小炒(长江西路店)" },
      ],
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      itemObj: {},
      loading: false,
      finished: false,
      currentRate: 0,
    };
  },

  mounted() {
    this.itemObj = this.$route.params
    this.name = this.itemObj.NAME ? this.itemObj.NAME : '雨城面馆家常小炒(松江北路店)'
    this.address = this.itemObj.SHOP_ADDRESS ? this.itemObj.SHOP_ADDRESS : '松江区松北大道'
    this.detailList[4].value = this.name
    if (this.itemObj.type == 'xq') {
      this.detailList[3].name = '小区名称'
      this.detailList[3].value = '中关国际'
    }
  },
  methods: {
    itemClick(row) {
      if (row.name == '打卡') {
        this.$router.push("/checkPage");
      } else if (row.name == '商机上报') {
        this.$router.push("/report");
      } else if (row.name == '营销拓展') {
        this.$router.push("/productMsg");
      } else if (row.name == '信息摸排') {
      } else if (row.name == '业务办理') {
      }
    },
    reBack() {
      this.$router.go(-1)
    },
    jumpRouter(url) {
      this.$router.push(url);
    },
  },
};
</script>

<style lang="scss" scoped type='text/css'>
.main {
  background-color: #f6f6f6;
  width: 100%;
  height: 100%;
}

.head-part {
  width: 100%;
  height: 14%;
  position: relative;

  .closebtn {
    position: absolute;
    right: 10px;
    top: 10px;
  }

  img {
    width: 100%;
    height: 100%;
  }
}

.content-part {
  width: 100%;
  height: 86%;
  padding: 10px;
  position: relative;

  .title {
    font-size: 3rem;
    font-weight: bold;
    color: #4466C6;
  }

  .label-l {
    background: #FFF4D7;
    padding: 4px;
    font-size: 2rem;
    color: #FFBA5B;
  }
}

.card-img {
  width: 100%;
  display: flex;
  flex-direction: row;
  height: 80px;
  margin: 20px 0;

  .img-item {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    img {
      width: 45px;
      height: 45px;
    }

    span {
      font-size: 2.5rem;
      font-weight: bold;
      color: #000;
      margin-top: 5px;
    }
  }
}

.detail-msg {
  margin-top: 20px;

  .item-msg {
    width: calc(100% - 40px);
    height: 30px;
    margin: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      color: #111;
      font-size: 2.4rem;
    }
  }
}
</style>